import { createRouter,createWebHashHistory} from "vue-router";
import HelloWorld from '../components/HelloWorld.vue'
import Demo01Syntax01 from '../components/demo01-syntax/Syntax01.vue';
import Demo01Syntax01If from '../components/demo01-syntax/Syntax02-if.vue';
import Demo02LifeCycle01 from '../components/demo02-life-cycle/LifeCycle01.vue';
import Demo03SyntaxInterpolation from '../components/demo03-syntax/demo03-syntax-interpolation.vue';
import Demo04DataMthod01 from '../components/demo04-data-method/demo04-data-method01.vue';
import Demo05Computed01 from '../components/demo05-computed/demo05-computed-01.vue';
import Demo06Class01 from '../components/demo06-class-style/demo06-class-01.vue';
import Demo06Class02 from '../components/demo06-class-style/demo06-class-02.vue';
import Demo06Style01 from '../components/demo06-class-style/demo06-style01.vue';
import Demo07ConditionIf01 from '../components/demo07-condition/deom07-condition-if01.vue';
import Demo07ConditionShow01 from '../components/demo07-condition/deom07-condition-show01.vue';
import Demo07ConditionFor01 from '../components/demo07-condition/deom07-condition-for01.vue';
import Demo07ConditionFor02 from '../components/demo07-condition/deom07-condition-for02.vue';
import Demo07ConditionFor03 from '../components/demo07-condition/deom07-condition-for03.vue';
import Demo08Event01 from '../components/demo08-event/demo08-event01.vue';
import Demo08Event02Keyup from '../components/demo08-event/demo08-event02-keyup.vue';
import Demo08Event03Component from '../components/demo08-event/demo08-event03-component.vue';
import Demo09Form01 from '../components/demo09-form/demo09-form01.vue';
import Demo09Form02Modifier from '../components/demo09-form/demo09-form02-modifier.vue';
import Demo09Form03Focus from '../components/demo09-form/demo09-form03-focus.vue';
import Demo10Component01 from '../components/demo10-component/demo10-component01.vue';
import Demo10Component02 from '../components/demo10-component/demo10-component02.vue';
import Demo10Component03 from '../components/demo10-component/demo10-component03.vue';
import Demo10Component04 from '../components/demo10-component/demo10-component04.vue';
import Demo10Component05 from '../components/demo10-component/demo10-component05.vue';
import Demo10Component06 from '../components/demo10-component/demo10-component06.vue';
import Demo10Component07 from '../components/demo10-component/demo10-component07.vue';
import Demo10Component08 from '../components/demo10-component/demo10-component08.vue';
import Demo10Component09 from '../components/demo10-component/demo10-component09.vue';
import Demo11ModuleDemo01 from '../components/demo11-module/demo11-module-demo01.vue';
import Demo11ModuleDemo02 from '../components/demo11-module/demo11-module-demo02.vue';
import Demo11ModuleDemo03 from '../components/demo11-module/demo11-module-demo03.vue';
import Demo11ModuleDemo04 from '../components/demo11-module/demo11-module-demo04.vue';
import Demo11ModuleDemo05 from '../components/demo11-module/demo11-module-demo05.vue';
import Demo12PropsDemo01 from '../components/demo12-props/demo12-props-demo01.vue';
import Demo12PropsDemo02 from '../components/demo12-props/demo12-props-demo02.vue';
import Demo13Demo01ForceUpdate from '../components/demo13-edge-cases/demo13-deom01-force-update.vue';
import Demo13Demo02VOnce from '../components/demo13-edge-cases/demo13-deom02-v-once.vue';
import Demo14TransitionDemo01Class from '../components/demo14-transition/demo14-transition-demo01-class.vue';
import Demo14TransitionDemo02Style from '../components/demo14-transition/demo14-transition-demo02-style.vue';
import Demo15CompositionDemo01Setup from '../components/demo15-composition/demo15-composition-demo01-setup.vue';
import Demo15CompositionDemo01Watch from '../components/demo15-composition/demo15-composition-demo02-watch.vue';
import Demo16ProvideInjectDemo01 from '../components/demo16-provide-inject/demo16-provide-inject-demo01.vue';
import Demo16ProvideInjectDemo02 from '../components/demo16-provide-inject/demo16-provide-inject-demo02.vue';
import Demo16ProvideInjectDemo03 from '../components/demo16-provide-inject/demo16-provide-inject-demo03.vue';
import Demo16ProvideInjectDemo04 from '../components/demo16-provide-inject/demo16-provide-inject-demo04.vue';
import Demo16ProvideInjectDemo05 from '../components/demo16-provide-inject/demo16-provide-inject-demo05.vue';
import Demo16ProvideInjectDemo06 from '../components/demo16-provide-inject/demo16-provide-inject-demo06.vue';
import Demo16ProvideInjectDemo07 from '../components/demo16-provide-inject/demo16-provide-inject-demo07.vue';
import Demo17TemplateDemo01 from '../components/demo17-template/demo17-template-demo01-jsx.vue';
import Demo17Render01 from '../components/demo17-template/demo17-render01.vue';
import Demo17Render02 from '../components/demo17-template/demo17-render02.vue';
import {defineAsyncComponent, h} from "vue";

const routes = [
    { path: "/", redirect: "/home" },
    {
        path: "/home",
        name: "home",
        component: HelloWorld
    },
    {
        path: "/syntax/01",
        name: "syntax01",
        component: Demo01Syntax01
    },
    {
        path: "/syntax/02if",
        name: "Syntax01If",
        component: Demo01Syntax01If
    },
    {
        path: "/life-cycle/01",
        name: "LifeCycle01",
        component: Demo02LifeCycle01
    },
    {
        path: "/demo03/syntax/interpolation",
        name: "Demo03SyntaxInterpolation",
        component: Demo03SyntaxInterpolation
    },
    {
        path: "/demo04/data-method/01",
        name: "Demo04DataMthod01",
        component: Demo04DataMthod01
    },
    {
        path: "/demo05/computed/01",
        name: "Demo05Computed01",
        component: Demo05Computed01
    },
    {
        path: "/demo06/class-style/class01",
        name: "Demo06Class01",
        component: Demo06Class01
    },
    {
        path: "/demo06/class-style/class02",
        name: "Demo06Class02",
        component: Demo06Class02
    },
    {
        path: "/demo06/class-style/style01",
        name: "Demo06Style01",
        component: Demo06Style01
    },
    {
        path: "/demo07/condition/show01",
        name: "Demo07ConditionShow01",
        component: Demo07ConditionShow01
    },
    {
        path: "/demo07/condition/if01",
        name: "Demo07ConditionIf01",
        component: Demo07ConditionIf01
    },
    {
        path: "/demo07/condition/for01",
        name: "Demo07ConditionFor01",
        component: Demo07ConditionFor01
    },
    {
        path: "/demo07/condition/for02",
        name: "Demo07ConditionFor02",
        component: Demo07ConditionFor02
    },
    {
        path: "/demo07/condition/for03",
        name: "Demo07ConditionFor03",
        component: Demo07ConditionFor03
    },
    {
        path: "/demo08/event01",
        name: "Demo08Event01",
        component: Demo08Event01
    },
    {
        path: "/demo08/event02/keyup",
        name: "Demo08Event02Keyup",
        component: Demo08Event02Keyup
    },
    {
        path: "/demo08/event03/component",
        name: "Demo08Event03Component",
        component: Demo08Event03Component
    },
    {
        path: "/demo09/form01",
        name: "Demo09Form01",
        component: Demo09Form01
    },
    {
        path: "/demo09/form02/modifier",
        name: "Demo09Form02Modifier",
        component: Demo09Form02Modifier
    },
    {
        path: "/demo09/form03/focus",
        name: "Demo09Form03Focus",
        component: Demo09Form03Focus
    },
    {
        path: "/demo10/component01",
        name: "Demo10Component01",
        component: Demo10Component01
    },
    {
        path: "/demo10/component02",
        name: "Demo10Component02",
        component: Demo10Component02
    },
    {
        path: "/demo10/component03",
        name: "Demo10Component03",
        component: Demo10Component03
    },
    {
        path: "/demo10/component04",
        name: "Demo10Component04",
        component: Demo10Component04
    },
    {
        path: "/demo10/component05",
        name: "Demo10Component05",
        component: Demo10Component05
    },
    {
        path: "/demo10/component06",
        name: "Demo10Component06",
        component: Demo10Component06
    },
    {
        path: "/demo10/component07",
        name: "Demo10Component07",
        component: Demo10Component07
    },
    {
        path: "/demo10/component08",
        name: "Demo10Component08",
        component: Demo10Component08
    },
    {
        path: "/demo10/component09",
        name: "Demo10Component09",
        component: Demo10Component09
    },
    {
        path: "/demo11/module/demo01",
        name: "Demo11ModuleDemo01",
        component: Demo11ModuleDemo01
    },
    {
        path: "/demo11/module/demo02",
        name: "Demo11ModuleDemo02",
        component: Demo11ModuleDemo02
    },
    {
        path: "/demo11/module/demo03",
        name: "Demo11ModuleDemo03",
        component: Demo11ModuleDemo03
    },
    {
        path: "/demo11/module/demo04",
        name: "Demo11ModuleDemo04",
        component: Demo11ModuleDemo04
    },
    {
        path: "/demo11/module/demo05",
        name: "Demo11ModuleDemo05",
        component: Demo11ModuleDemo05
    },
    {
        path: "/demo12/props/demo01",
        name: "Demo12PropsDemo01",
        component: Demo12PropsDemo01
    },
    {
        path: "/demo12/props/demo02",
        name: "Demo12PropsDemo02",
        component: Demo12PropsDemo02
    },
    {
        path: "/demo13/edge-cases/demo01",
        name: "Demo13Demo01ForceUpdate",
        component: Demo13Demo01ForceUpdate
    },
    {
        path: "/demo13/edge-cases/demo02",
        name: "Demo13Demo02VOnce",
        component: Demo13Demo02VOnce
    },
    {
        path: "/demo14/transaction/demo01",
        name: "Demo14TransitionDemo01Class",
        component: Demo14TransitionDemo01Class
    },
    {
        path: "/demo14/transaction/demo02",
        name: "Demo14TransitionDemo02Style",
        component: Demo14TransitionDemo02Style
    },
    {
        path: "/demo15/composition/demo01",
        name: "Demo15CompositionDemo01Setup",
        component: Demo15CompositionDemo01Setup
    },
    {
        path: "/demo15/composition/demo02",
        name: "Demo15CompositionDemo01Watch",
        component: Demo15CompositionDemo01Watch
    },
    {
        path: "/demo16/provide-inject/demo01",
        name: "Demo16ProvideInjectDemo01",
        component: Demo16ProvideInjectDemo01
    },
    {
        path: "/demo16/provide-inject/demo02",
        name: "Demo16ProvideInjectDemo02",
        component: Demo16ProvideInjectDemo02
    },
    {
        path: "/demo16/provide-inject/demo03",
        name: "Demo16ProvideInjectDemo03",
        component: Demo16ProvideInjectDemo03
    },
    {
        path: "/demo16/provide-inject/demo04",
        name: "Demo16ProvideInjectDemo04",
        component: Demo16ProvideInjectDemo04
    },
    {
        path: "/demo16/provide-inject/demo05",
        name: "Demo16ProvideInjectDemo05",
        component: Demo16ProvideInjectDemo05
    },
    {
        path: "/demo16/provide-inject/demo06",
        name: "Demo16ProvideInjectDemo06",
        component: Demo16ProvideInjectDemo06
    },
    {
        path: "/demo16/provide-inject/demo07",
        name: "Demo16ProvideInjectDemo07",
        component: Demo16ProvideInjectDemo07
    },
    {
        path: "/demo17/template/demo01",
        name: "Demo17TemplateDemo01",
        component: Demo17TemplateDemo01
    },
    {
        path: "/demo17/template/render01",
        name: "Demo17Render01",
        component: Demo17Render01
    },
    {
        path: "/demo17/template/render02",
        name: "Demo17Render02",
        component: Demo17Render02
    },
    {
        path: '/demo18-route/parent01',
        name: 'route-parent01',
        component: () => import(/* webpackChunkName: "demo18-route_parent01" */ '../components/demo18-route/demo18-route-parent01.vue'),
        children: [
            /*{
                path:'children01a',
                name: 'children01a',
                component: () => h('div', '子页面01 A')
            },
            {
                path:'children01b',
                name: 'children01b',
                component: ()=>h('div', (new Date()).toLocaleString())
            },*/
            {
                path:'children01c/:id',
                name: 'children01c',
                component: () => import(/* webpackChunkName: "demo18-route_child01c" */ '../components/demo18-route/demo18-route-child01c.vue')
            }
        ]
    }
];
export default createRouter({
    history: createWebHashHistory(),
    routes: routes
});
